<template>
  <v-chart :autoresize="true" :manual-update="true" class="chart"
           theme="shine"
           ref="chart" style="height: 110%;bottom: 15%;"/>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { round } from 'number-precision';
import dayjs from 'dayjs';
import { getOilsSummaryData } from '@/api/dataScreen';

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      list = [] as any;

      yData = [] as any;

      seriesData = [] as any;

      seq = 0;
    }());

    const chart = ref();

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
        // position(p) { // 其中p为当前鼠标的位置
        //   return [p[0] + 10, p[1] - 10];
        // },
        formatter(params) {
          return `${params[0].name}<br/>升数: ${params[0].data ? params[0].data : '0'}升<br/>金额: ${params[1].value ? params[1].value : '0'} 万元`;
        },
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '10%',
        containLabel: true,
      },
      legend: {
        data: ['升数', '金额'],
        x: 'right',
        top: '10%',
        left: '80%',
        itemWidth: 10, // 图例的宽度
        itemHeight: 10, // 图例的高度
        textStyle: { // 图例文字的样式
          color: '#fff',
          fontSize: '0.65rem',
        },
      },
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0], // 这里是设置关联的 x 轴
          start: 0,
          end: 100, // 这里可以根据需要设置默认显示的范围
        },
      ],
      xAxis: [{
        // show: true,
        type: 'category',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.65rem',
          },
          // rotate: 20,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(211 ,211 ,211,0.5)',
          },
        },
        axisTick: { show: true },
        splitLine: {
          show: false,
        },
      },
      {
        show: false,
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '0.65rem',
          },
          // rotate: 20,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(211 ,211 ,211,0.5)',
          },
        },
        axisTick: { show: false },
        splitLine: {
          show: false,
        },
      }],
      yAxis: [{
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: { show: false },
        axisLabel: {
          fontSize: '0.65rem',
          color: '#fff',
        },
      }],
      series: [
        {
          name: '升数',
          type: 'bar',
          barWidth: 10, // 柱子宽度
          barGap: 1, // 柱子之间间距
          barMinHeight: 5, // 设置柱状图的最小高度
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  { offset: 0, color: '#c76968' },
                  { offset: 0.5, color: '#b3424a' },
                  { offset: 1, color: '#d93a49' },
                ],
              },
            },
          },
        },
        {
          name: '金额',
          type: 'bar',
          barWidth: 10,
          barGap: 1,
          barMinHeight: 5, // 设置柱状图的最小高度
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  { offset: 0, color: '#73b9a2' },
                  { offset: 0.5, color: '#72baa7' },
                  { offset: 1, color: '#00ae9d' },
                ],
              },
            },
          },
        },
      ],
    };

    async function getData(stationCode: number, searchDate: any) {
      state.list = await getOilsSummaryData(dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'), stationCode, 1);
      if (state.list && state.list[0]) {
        dealChartData();
      }
    }

    function dealChartData() {
      state.yData = [];
      state.seriesData = [[], []];
      for (const item of state.list.reverse()) {
        state.yData.push(item.站名);
        state.seriesData[0].push(item['区间销售量(升)']);
        state.seriesData[1].push(item['区间实收金额(万元)']);
      }
      // const max1 = state.seriesData[0].reduce((a, b) => (b > a ? b : a));
      // const max2 = state.seriesData[1].reduce((a, b) => (b > a ? b : a));
      option.xAxis[0].data = state.yData;
      // option['xAxis'][0]['max'] = round(max1 * 1.2, 0);
      // option['xAxis'][1]['max'] = round(max2 * 1.2, 0);
      option.series[0].data = state.seriesData[0];
      option.series[1].data = state.seriesData[1];
      chart.value.setOption(option);
    }

    return {
      getData,
      chart,
    };
  },
});
</script>

<style scoped>

</style>
